<template>
    <div class="cmt-container">
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="想要说点什么呢...(120字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;&nbsp;&nbsp;发表时间:{{Date.now() | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{item}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
    
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data(){
        return {
            comments:[],//保存评论的数据（本例子中因为没有评论数据的来源，所以保存的是每篇文章的标题信息来充当评论数据）
            msg:''//双向绑定一个msg来获取评论的信息
        }
    },
    created(){
        this.getComments();
    },
    methods:{
        getComments(){//获取评论
            this.$http.get('https://api.apiopen.top/getWangYiNews?count=20').then(res=>{
                // console.log(res);
                if(res.body.code===200){
                    for(var i = 0;i<5;i++) {
                        //本例子中因为没有评论数据的来源，所以保存的是每篇文章的标题信息来充当评论数据，循环加入5个标题作为评论的数据
                        this.comments.push(res.body.result[this.indexfromfather-1].title);
                    }
                }else{
                    Toast('获取评论信息失败。')
                }
            })
        },
        getMore(){//加载更多
            // 本来以页码pageIndex为参数传入url地址的api接口，但是我们没有api所以重复调用上面的方法来获得重复数量的假数据，并将其push到评论数组中，不会导致前面加载的数据被覆盖掉；在vue中，数据一旦被改变，就会自动的刷新页面的内容，所以就动态的加载了评论数据
            this.getComments();
        },
        postComment(){
            // 校验是否为空的内容，如果this.msg为空，则Toast提示信息
            if(this.msg.trim().length===0){
                return Toast("评论内容不能为空...");
            }
            // 底下的代码是基于有API接口时写的
            // this.$http
            //     .post('',$route.params.index,{content:this.msg.trim()})
            //     .then(res=>{
            //         if(res.body.status ===0 ){
            //             // 1.拼接一个评论对象
            //             var cmt = {user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()}
            //             // 2.
            //             this.comments.unshift(cmt);
            //             this.msg = '';
            //         }
            // })

            /** 
             * 我们写一个假的代替方法
            */
           this.comments.unshift(this.msg);
           this.msg = '';

        }
    },
    props:["indexfromfather"] //父子组件传值，通过属性绑定获得的父组件中的index值，伪id值
}
</script>




<style lang="scss" scoped>
.cmt-container{
    h4{
        font-size: 16px;
    }
    textarea{
        margin-bottom: 2px;
        font-size: 12px;
        height: 85px;
    }
    .cmt-list{
        margin: 5px 1px;
        .cmt-item{
            .cmt-title{
                background-color: #E7EAED;
                font-size: 12px;
                line-height: 30px;
            }
            .cmt-body{
                text-indent: 2em;
                font-size: 14px;
            }
        }
    }
}

</style>
